<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务日志</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <style>  
    .button {
	    background-color: #4CAF50; /* Green */
	    border: none;
	    color: white; 
	    padding: 10px 20px; 
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 16px;
	    margin-left: 10px;
	    margin-bottom: 10px;
	    cursor: pointer;
	}
	.button2 {background-color: #f44336;}
	.info{
	    color: green;
	}
	.debug{
	    color: blue;
	}
	.warn{
	    color: yellow;
	}
	.error{
	    color: #FF6A6A;
	}
	.classname{
	    color: white;
	}
	.time{
	    color: white;
	} 
	.msg{
	   
	}
    </style>
</head>
<body>
<button class="button" onclick="openSocket()">继续</button>
<button class="button button2" onclick="closeSocket()" title="暂停期间的日志将会丢失，请谨慎操作!">暂停</button>
<button class="button button2" onclick="clearLog()">清除</button>
<div id="log-container" style="height:500px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div></div>
</div>
</body>
<script>
    var stompClient = null;
    var server = null;
    var stop = false;
    $(document).ready(function() {
    	setHeight();
    	window.setInterval(connect, 30000); 
    	$.ajax({
            url: "easy-log/host/get",
            type: "get",
            success: function (host) {
               server = host;
         	   if(server == "" || server == null){
            	    alert("服务器异常!");
            	    return;
               }
           	   openSocket();
            }
       });
    });
    function setHeight(){
    	$("#log-container").height($(window).height()*0.85);
    }
    function connect(){ 
       if(stop == false){
    	   if(stompClient == null || stompClient.ws.readyState == 3){
    		   window.location.reload();
    	   } else if(stompClient.ws.readyState == 2){
    		   openSocket();
    	   } 
       }
    } 
    function openSocket() {
    	stop = false; 
        if(stompClient==null){
            var socket = new SockJS(server + 'easyLog?token=showLog');
            stompClient = Stomp.over(socket); 
            stompClient.connect({token:"showLog"}, function(frame) {
                stompClient.subscribe('/easyLog/show', function(event) {
                    var content=event.body;
                    $("#log-container div").append(content).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                },{
                    token:"easy-log"
                });
            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient=null;
            stop = true;
        }
    }
    function clearLog(){
    	$("#log-container div").html("");
    }
</script>
</body>
</html>